<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="./lib/testHelper.js"></script>
    <script src="../dist/quark-renderer.js"></script>
    <style>
      html {
        font-family: Arial;
        font-size: 14px;
      }
      .control {
        position: fixed;
        width: 180px;
        bottom: 0;
        top: 0;
        right: 0;
        z-index: 99999;
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px;
        background: #dee;
        box-shadow: 0 0 5px #888;
        font-size: 12px;
        overflow: auto;
      }
      .control-block {
        padding-left: 5px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
      }
      button {
        margin: 2px;
      }
      .storage-key {
        color: #888;
      }
      #storage-container {
        padding: 5px 0;
      }
      label {
        padding-left: 5px;
        padding-right: 5px;
      }
    </style>
  </head>
  <body>
    <script>
      var _updaters = {};
    </script>

    STATE are stored to URL hash to enable to compare <br />
    SVG renderer and Canvas renderer in <a href="-cases.html">-cases.html</a>.

    <div class="control">
      <div class="control-block">
        STATE: <br />
        <div id="storage-container"></div>
      </div>

      <div class="control-block">
        <label>rotation:</label>
        <button onclick="startRotation();">Start</button>
        <button onclick="stopRotation();">Stop</button>
        <button onclick="updateToURL('rotation', 0.1 * Math.PI);">0.1 * Math.PI</button>
        <button onclick="updateToURL('rotation', -0.3 * Math.PI);">-0.3 * Math.PI</button>
        <button onclick="removeToURL('rotation');">Remove</button>
        <script>
          _updaters.rotation = function () {
            var rotation = _storage.rotation;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                rotation: clone(rotation),
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                rotation: clone(rotation),
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>origin:</label>
        <button onclick="updateToURL('origin', [150, 70]);">[150, 70] (right-bottom-corner)</button>
        <button onclick="removeToURL('origin');">Remove</button>
        <script>
          _updaters.origin = function () {
            var origin = _storage.origin;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                origin: clone(origin),
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                origin: clone(origin),
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>position:</label>
        <button onclick="updateToURL('position', [75, 35]);">[75, 35]</button>
        <button onclick="updateToURL('position', [-75, -35]);">[-75, -35]</button>
        <button onclick="removeToURL('position');">Remove</button>
        <script>
          _updaters.position = function () {
            var position = _storage.position;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                position: clone(position),
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                position: clone(position),
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>scale:</label>
        <button onclick="updateToURL('scale', [2, 2]);">[2, 2]</button>
        <button onclick="updateToURL('scale', [0.5, 0.5]);">[0.5, 0.5]</button>
        <button onclick="removeToURL('scale');">Remove</button>
        <script>
          _updaters.scale = function () {
            var scale = _storage.scale;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                scale: clone(scale),
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                scale: clone(scale),
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>textBackground:</label>
        <button onclick="updateToURL('hasBg', 1);">Add</button>
        <button onclick="removeToURL('hasBg');">Remove</button>
        <script>
          _updaters.hasBg = function () {
            var hasBg = _storage.hasBg;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                style: {
                  textBorderRadius: 3,
                  textBackgroundColor: 'rgba(0, 255, 0, 0.3)',
                  textBorderColor: '#191933',
                  textBorderWidth: 2,
                  textBoxShadowBlur: 5,
                  textBoxShadowColor: '#1099ee',
                  textBoxShadowOffsetX: 2,
                  textBoxShadowOffsetY: 5,
                },
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                style: {
                  textBorderRadius: 8,
                  textBackgroundColor: 'rgba(0, 255, 0, 0.3)',
                  textBorderColor: '#191933',
                  textBorderWidth: 2,
                  textBoxShadowBlur: 5,
                  textBoxShadowColor: '#1099ee',
                  textBoxShadowOffsetX: 2,
                  textBoxShadowOffsetY: 5,
                },
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>textPadding:</label>
        <button onclick="updateToURL('textPadding', [10, 20, 30, 40]);">[10, 20, 30, 40]</button>
        <button onclick="updateToURL('textPadding', 50);">50</button>
        <button onclick="removeToURL('textPadding');">Remove</button>
        <script>
          _updaters.textPadding = function () {
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                style: {
                  textPadding: clone(_storage.textPadding),
                },
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                style: {
                  textPadding: clone(_storage.textPadding),
                },
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>textAlign:</label>
        <button onclick="updateToURL('textAlign', 'left');">'left'</button>
        <button onclick="updateToURL('textAlign', 'center');">'center'</button>
        <button onclick="updateToURL('textAlign', 'right');">'right'</button>
        <button onclick="removeToURL('textAlign');">Remove</button>
        <script>
          _updaters.textAlign = function () {
            var textAlign = _storage.textAlign;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                style: {
                  textAlign: textAlign,
                },
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                style: {
                  textAlign: textAlign,
                },
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>textVerticalAlign:</label>
        <button onclick="updateToURL('textVerticalAlign', 'top');">'top'</button>
        <button onclick="updateToURL('textVerticalAlign', 'middle');">'middle'</button>
        <button onclick="updateToURL('textVerticalAlign', 'bottom');">'bottom'</button>
        <button onclick="removeToURL('textVerticalAlign');">Remove</button>
        <script>
          _updaters.textVerticalAlign = function (textVerticalAlign) {
            var textVerticalAlign = _storage.textVerticalAlign;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              shape.attr({
                style: {
                  textVerticalAlign: textVerticalAlign,
                },
              });
            }
            for (var i = 0; i < _elList2.length; i++) {
              var shape = _elList2[i];
              shape.attr({
                style: {
                  textVerticalAlign: textVerticalAlign,
                },
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>Add '\n' at char index 3 (only for green rect):</label>
        <button onclick="updateToURL('addLineBreak', true);">Add</button>
        <button onclick="removeToURL('addLineBreak');">Remove</button>
        <script>
          _updaters.addLineBreak = function () {
            var textVerticalAlign = _storage.textVerticalAlign;
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              var text = shape.__qr_test_text;
              text = text.substr(0, 3) + '\n' + text.substr(3, text.length - 1);
              shape.attr({
                style: {
                  text: text,
                },
              });
            }
          };
        </script>
      </div>

      <div class="control-block">
        <label>Add truncate (only for red rect):</label>
        <button onclick="updateToURL('truncate', {outerWidth: 50, outerHeight: 40, ellipsis: '...'});">
          {outerWidth: 50, outerHeight: 40, ellipsis: '...'}
        </button>
        <button onclick="updateToURL('truncate', {outerWidth: 5, outerHeight: 20, ellipsis: '...', placeholder: '-'});">
          {outerWidth: 5, outerHeight: 20, ellipsis: '...', placeholder: '-'});
        </button>
        <button onclick="removeToURL('truncate');">Remove</button>
        <script>
          _updaters.truncate = function () {
            var truncate = clone(_storage.truncate);
            for (var i = 0; i < _elList1.length; i++) {
              var shape = _elList1[i];
              var text = '';
              for (var j = 0; j < 5; j++) {
                text += shape.__qr_test_text;
              }
              shape.attr({
                style: {
                  text: text,
                  truncate: truncate,
                },
              });
            }
          };
        </script>
      </div>
    </div>

    <div id="main1" style="width: 1000px; height: 700px"></div>

    <script type="text/javascript">
      var clone = QuarkRenderer.dataUtil.clone;
      var encodeHTML = testHelper.encodeHTML;
      var _timer;
      var _storage = {};
      var _elList2 = [];
      var _elList1 = [];
      var _rotating = false;

      function init() {
        initBase();
        testHelper.initURLStorage(updateView);
      }

      function initBase() {
        var qr1 = QuarkRenderer.init(document.getElementById('main1'), {
          renderer: window.__QRENDER__DEFAULT__RENDERER__,
        });

        var text = 'ThisIsText中文';
        var group = new QuarkRenderer.Group({
          position: [200, 50],
        });
        qr1.add(group);
        group.add(
          new QuarkRenderer.Rect({
            style: {
              fill: 'green',
            },
            shape: {
              x: 0,
              y: 0,
              width: 300,
              height: 100,
            },
          }),
        );
        var textEl = new QuarkRenderer.Text({
          __qr_test_text: text,
          style: {
            text: text,
          },
        });
        group.add(textEl);
        _elList1.push(textEl);

        var group2 = new QuarkRenderer.Group({
          position: [200, 350],
        });
        qr1.add(group2);
        group2.add(
          new QuarkRenderer.Rect({
            shape: {
              x: 0,
              y: 0,
              width: 300,
              height: 100,
            },
            style: {
              fill: 'rgba(22, 55, 99)',
            },
          }),
        );
        var textEl2 = new QuarkRenderer.Text({
          style: {
            fill: '#eeaaff',
            text: ['{j|' + text + '}', '我是 Rect Text, textDistance: 20', '整体的 textAlign textVerticalAlign 取默认值'].join('\n'),
            textFill: 'red',
            font: '10px Arial',
            rich: {
              j: {
                font: '16px Arial',
                textFill: '#922889',
                textVerticalAlign: 'top',
              },
            },
          },
        });
        group2.add(textEl2);
        _elList2.push(textEl2);
      }

      window.updateToURL = function (key, value) {
        testHelper.updateToHash(key, clone(value));
      };

      window.removeToURL = function (key) {
        // key with undefined value will be removed after JSON.stringify();
        testHelper.updateToHash(key, void 0);
        // force reload whether search is changed.
        location.reload();
      };

      function updateView() {
        updateStorage();
        updateStorageView();

        for (var updaterName in _updaters) {
          if (_updaters.hasOwnProperty(updaterName)) {
            // Do not set attr, test the default cases.
            if (!_storage.hasOwnProperty(updaterName)) {
              continue;
            }
            _updaters[updaterName]();
          }
        }

        nextRotate();
      }

      function updateStorage() {
        _storage = testHelper.getAllFromHash();
      }

      function updateStorageView() {
        var html = [];
        for (var key in _storage) {
          if (_storage.hasOwnProperty(key)) {
            html.push('<span class="storage-key">' + encodeHTML(key) + '</span>:&nbsp;&nbsp;' + encodeHTML(JSON.stringify(_storage[key])));
          }
        }
        var dom = document.getElementById('storage-container');
        dom.innerHTML = html.join('<br>');
      }

      function nextRotate() {
        if (_rotating) {
          setTimeout(function () {
            var rotation = _storage.rotation || 0;
            rotation += 0.01;
            rotation %= Math.PI * 2;
            testHelper.updateToHash('rotation', rotation);
          }, 50);
        }
      }

      function startRotation() {
        _rotating = true;
        nextRotate();
      }

      function stopRotation() {
        _rotating = false;
      }

      init();
    </script>
  </body>
</html>
